import './index.scss'
import { Card, Button, Form, Input, Select, Checkbox } from 'antd'
import { LockOutlined, UserOutlined, RightCircleTwoTone, PhoneOutlined, SolutionOutlined } from '@ant-design/icons'
import { Link, useNavigate } from 'react-router-dom'
import { useDispatch } from 'react-redux'
import { fetchUserRegister } from '@/store/modules/userStore'

const { Option } = Select
const Register = () => {
  const dispatch = useDispatch()
  const navigate = useNavigate()
  // 点击注册按钮时触发 参数formValue即是表单输入数据
  const onFinish = async formValue => {
    const res = await dispatch(fetchUserRegister(formValue))
    if (res) {
      navigate('/login')
    } 
  }

  return (
    <div className="register">
      <Card className="register-container">
        <div className='header'>博客系统欢迎您</div>
        {/* 注册表单 */}
        <Form
          onFinish={onFinish}>
        <Form.Item
        name="username"
        rules={[
          {
            required: true,
            message: '请输入用户名',
          },
        ]}
      >
        <Input
            prefix={<UserOutlined/>} 
            placeholder="请输入用户名" 
            size="large"/>
      </Form.Item>
      
      <Form.Item
        name="password"
        rules={[
          {
            required: true,
            message: '请输入密码',
          },
        ]}
      >
        <Input.Password
          prefix={<LockOutlined/>}
          type="password"
          placeholder="请输入密码"
          size="large"
        />
      </Form.Item>
      <Form.Item
        name="confirm"
        dependencies={['password']}
        hasFeedback
        rules={[
          {
            required: true,
            message: '请再次输入密码',
          },
          ({ getFieldValue }) => ({
            validator(_, value) {
              if (!value || getFieldValue('password') === value) {
                return Promise.resolve()
              }
              return Promise.reject(new Error('两次密码输入不一致'))
            },
          }),
        ]}
      >
        <Input.Password 
          prefix={<LockOutlined/>} 
          placeholder="请再次输入密码" 
          size="large"/>
      </Form.Item>
      <Form.Item
        name="gender"
        rules={[
          {
            required: true,
            message: '请选择您的性别',
          },
        ]}
      >
        <Select 
          placeholder="请选择您的性别" 
          size='large'>
          <Option value="男" >男</Option>
          <Option value="女">女</Option>
        </Select>
      </Form.Item>
      <Form.Item
        name="phone"
        rules={[
          {
            required: true,
            message: '请输入电话号码',
          },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '手机号码格式不对'
          }
        ]}
      >
        <Input
          size='large'
          placeholder="请输入手机号码"
          prefix={<PhoneOutlined />}
          style={{
            width: '100%',
          }}
        />
      </Form.Item>
      <Form.Item
        name="idNumber"
        rules={[
          {
            required: true,
            message: '请输入身份证号码',
          },
          {
            pattern: /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[Xx\d]$/            ,
            message: '身份证号码格式不对'
          }
        ]}
      >
        <Input
          size='large'
          placeholder="请输入身份证号码"
          prefix={<SolutionOutlined />}
          style={{
            width: '100%',
          }}
        />
      </Form.Item>
      <Form.Item
        name="agreement"
        valuePropName="checked"
        rules={[
          {
            validator: (_, value) =>
              value ? Promise.resolve() : Promise.reject(new Error('请选择同意注册协议')),
          },
        ]}
      >
        <Checkbox>
          我已阅读并同意 <a href="">《注册协议》</a>
        </Checkbox>
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit" className="register-form-button" size="large">
          注册并登录
        </Button>
        <RightCircleTwoTone />
        <Link className='to-login' to={'/login'}>去登录</Link>
      </Form.Item>
        </Form>
      </Card>
    </div>
  )
}


export default Register